<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="handleReset">
      <x-filter-item :label="$t('supplierSelf.rectifyInform.rectifyInformOrder')">
        <el-input
          v-model="searchParams.number"
          :placeholder="$t('supplierSelf.rectifyInform.rectifyInformOrderPlaceholder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('supplierSelf.rectifyInform.state')">
        <x-select
          :placeholder="$t('common.all')"
          v-model="searchParams.state"
          :options="dictOptions['srm_rectify.state']"
          style="width: 100%"
          clearable
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('supplierSelf.rectifyInform.createTime')">
        <el-date-picker
          v-model="searchParams.createTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('common.to')"
          :start-placeholder="$t('supplierSelf.rectifyInform.startTimePlaceholder')"
          :end-placeholder="$t('supplierSelf.rectifyInform.endTimePlaceholder')"
          clearable
        >
        </el-date-picker>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="24" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">
              {{ selectDictLabel(dictOptions['srm_rectify.state'], scope.row.state) }}
            </span>
            <span v-else-if="item.prop === 'replyDate' || item.prop === 'createTime'">
              {{ replaceDateTime(scope.row[item.prop]) }}
            </span>
            <span v-else-if="item.prop === 'result'">
              {{ selectDictLabel(dictOptions['srm_rectify.result'], scope.row[item.prop]) | emptyVal }}
            </span>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="240">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions, scope.row)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
  </x-page>
</template>
<script>
  import {
    buttonIcons,
    PermissionsMixin,
    QueryDictMixin,
    replaceDateTime,
    selectDictLabel,
    TableListMixin
  } from '@package/utils'
  import { actions, columns } from '../config/rectifyInform'
  import { listUrl } from '../api/rectifyInform.js'

  export default {
    name: 'RectifyInform',
    components: {},
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns,
        actions,
        listUrl,
        searchParams: {
          number: '',
          state: '',
          createName: '',
          createTime: ''
        },
        statusOptions: [],
        tableColumns: [],
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        srmDictKeys: ['srm_rectify.state', 'srm_rectify.result'],
        selectionData: [],
        rectifyStateTypeDict: {
          0: 'info',
          1: 'warning',
          2: 'danger',
          3: 'info',
          4: 'success',
          5: 'danger'
        }
      }
    },
    computed: {
      getActions() {
        return (actions, row) => {
          const { state } = row
          return actions.map((action) => {
            const { key } = action
            switch (state) {
              case 1: // 方案待回复
              case 5: // 方案被驳回
                action.disabled = !['detail', 'reply'].includes(key)
                break
              case 3: // 整改中
                action.disabled = !['detail', 'complete'].includes(key)
                break
              default:
                action.disabled = !['detail'].includes(key)
                break
            }
            return action
          })
        }
      }
    },
    methods: {
      replaceDateTime,
      buttonIcons,
      selectDictLabel,
      handleSearch(val) {
        const { number, state, createName, createTime } = this.searchParams
        this.queryParam = {
          ...val,
          number,
          state,
          createName,
          beginTime: createTime ? `${createTime[0]} 00:00:00` : '',
          endTime: createTime ? `${createTime[1]} 23:59:59` : ''
        }
        this.loadData()
      },
      /**
       * 重置查询
       *
       */
      handleReset() {
        this.searchParams = {
          number: '',
          state: '',
          createName: '',
          createTime: ''
        }
        this.resetSearch()
      },
      async handleActions({ key, data }) {
        switch (key) {
          case 'detail':
            await this.$router.push({
              name: 'rectifyInformDetail',
              query: {
                rectifyId: data.id,
                isDetail: '1'
              }
            })
            break
          case 'reply':
            await this.$router.push({
              name: 'rectifyInformReply',
              query: {
                rectifyId: data.id
              }
            })
            break
          case 'complete': {
            await this.$router.push({
              name: 'rectifyInformDetail',
              query: {
                rectifyId: data.id
              }
            })
            break
          }
          default:
            break
        }
      },
      /**
       * 列表选中数据
       *
       */
      handleSelectionChange(data) {
        this.selectionData = data
      },
      /**
       * 新增
       *
       */
      handleAdd() {
        this.$router.push({ path: '/supplier/rectifyInform/add' })
      },
      handleExportExcel() {
        this.handleExport()
      }
    }
  }
</script>
